<template>
    
    <div class="comment_box">
        <h2>评论区域</h2>
        <textarea placeholder="请输入您的评价，120字以内" maxlength="120" v-model="msg"></textarea>
        <mt-button type="danger" size="large" @click="submitComt">发表评论</mt-button>
        <hr>
        <ul>
            <li v-for="(item, i) in comments" :key='i'>
                <h5>第{{i+1}}楼  用户名：{{ item.user_name }} 发表时间：{{item.add_time | timeF}}</h5>
                <p>{{item.content}}</p>
            </li>
        </ul>
        <mt-button type="danger" size="large" plain @click='addMore'>加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            index:1,
            comments:[],
            msg:''
        }
    },
    props:['infoId'],
    created(){
        this.getCommentList()
    },
    methods:{
        getCommentList(){
            this.$http.get('api/getcomments/'+this.infoId+'?pageindex='+this.index).then(function(res){
                if (res.body.status == 0){
                    this.comments = this.comments.concat(res.body.message) 
                }
            })
        },
        addMore(){
            this.index++
            this.getCommentList()
        },
        submitComt (){
            this.$http.post('api/postcomment/'+this.$route.params.id,{content:this.msg.trim()}).then(function(res){
                if (res.body.status == 0){
                    let cmt ={
                        user_name:'匿名用户',
                        content:this.msg.trim(),
                        add_time:Date.now()
                    }
                    this.comments.unshift(cmt)
                    this.msg = ''
                }
            })
        }
    }
}
</script>
<style lang="scss">
.comment_box {
    h2 {
        font-size: 18px;
    }
    li {
        list-style: none;
        p {
            font-size: 12px;
            line-height: 14px;
            text-indent: 2em;
        }
    }
    textarea  {
        margin:0;
        height: 85px;
        font-size: 14px;
    }
    ul,
    p {
        margin: 0;
        padding: 0;
    }
    h5 {
        font-size: 14px;
        line-height: 20px;
        background-color: #ccc;
        margin: 0;
    }
}
</style>
